<template>
  <div>
    <!-- <对象语法> -->
    <div :class="{item1:true}"></div>
    <div :class="{item1:haveClass}"></div>
    <!-- <数组语法语法> -->
    <div :class="['item1']"></div>
    <div :class="['item'+classNum,]"></div>
    <!-- <数组嵌套对象> -->
    <div :class="[{item1:true}]"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      haveClass: true,
      classNum: 1
    };
  },
  methods: {}
};
</script>

<style scoped>
.item1 {
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px;
}
</style>